<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Template • TodoMVC</title>
  <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
  <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
  <!-- CSS overrides - remove if you don't need it -->
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
<section class="todoapp" id="app">
 <!--  <div v-for="item in todos">
    <p>{{item}}</p>
  </div> -->

  <header class="header">
    <h1>todos</h1>
    <input class="new-todo"
           @change="handleNewTodo"
           placeholder="What needs to be done?" v-focus >
  </header>
  <!-- This section should be hidden by default and shown when there are todos -->
  <template v-if="todos.length">
    <section class="main">
     <!--  <input
        @click="handleShowTodos"
        id="toggle-all"
        class="toggle-all"
        type="checkbox"> -->
         <input
       v-model="handTodosChecked"
        id="toggle-all"
        class="toggle-all"
        type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- These are here just to show the structure of the list items -->
        <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
        <!--
          任务项有三种样式状态：
            未完成：无样式
            已完成：completed
            编辑：editing
         -->
        <!--
          当我双击的时候，我就把 currentEditing = 当前双击的这个任务项
          每个任务项 class 的 editing 都有一个判定：如果 currentEditing === 我自己 ，则该任务项就获得 editing 样式
         -->
        <li v-for="(item,index) in todosShowText" :class="{completed:item.completed ,  editing: msg === item
        }">
          <div class="view">
            <input class="toggle" type="checkbox" v-model="item.completed">
            <label
              @dblclick="handleDbTodos(item)"
              >{{item.title}}</label>
            <!--
              当事件处理函数没有传参的时候，第一个参数就是默认的事件源对象：event
              当手动传递了参数的时候，就没办法获取默认的 event 事件源对象
              这个时候我们可以手动在调用方法的时候传递 $event 来接收 event 事件源对象
             -->
            <button class="destroy" @click="handleDel(index)"></button>
          </div>
          <!--
            由于我们还有一个取消编辑不保存的功能，所以我们这里就不使用双向数据绑定
           -->
          <input class="edit" :value="item.title" @keydown.enter="handEditDotos(index,$event)"
            @blur="handEditDotos(index,$event)"
                 @keydown.esc="handleEscTodos"
                 v-todo-focus="item==msg"
            >
        </li>
      </ul>
    </section>
    <!-- This footer should hidden by default and shown when there are todos -->
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>{{ todosLength }}</strong> item left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a :class="{selected: todoText == ''}" href="#/">All</a>
        </li>
        <li>
          <a href="#/active" :class="{selected: todoText === 'active'}" >Active</a>
        </li>
        <li>
          <a href="#/completed" :class="{selected:todoText==='completed'}">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button
        v-if="todos.some(item=>item.completed)"
        class="clear-completed"
        @click="handAllTodos"
        >Clear completed</button>
    </footer>
  </template>
</section>
<footer class="info">
  <p>Double-click to edit a todo</p>
  <!-- Remove the below line ↓ -->
  <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
  <!-- Change this out with your name and url ↓ -->
  <p>Created by <a href="http://todomvc.com>"you</a></p>
  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>

<!-- Scripts here. Don't remove ↓ -->
<!-- <script src="node_modules/todomvc-common/base.js"></script> -->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="./js/app2.js">
</script>
</body>

</html>